<template>
  	<div>
		<Modal
			v-model="madecode"
			title="电子处方"
			:footer="null"
			styles="padding: none;margin: none"
			:closable="false"
			:mask-closable="false"
			>  
			<div class="PerMask">	
				<div class="PerMask-com">
					<div class="com-right" :style="codes">
						<div class="header">  
							<p>{{clinic.hospitalName}}</p>            
							<p>电子处方笺</p>
							<p>普通药品处方</p>
							<img v-if="!clinic.twoDimensionCode" src="../../../assets/images/ele-code.png" alt="">
							<img v-if="clinic.twoDimensionCode" :src="clinic.twoDimensionCode" alt="">
							<div class="nub">
								<span style="float:left"><b>门诊号</b>&nbsp;:&nbsp;{{clinic.clinicNumber}}</span>
								<span style="float:right"><b>处方号</b>&nbsp;:&nbsp;{{clinic.rxNumber}}</span>    
							</div>
						</div>
						<div class="line"></div>
						<div class="essential">
							<span>姓名&nbsp;:&nbsp;<small>{{clinic.name}}</small></span>
							<span>性别&nbsp;:&nbsp;<small>{{clinic.gender === 1 ? '男':clinic.gender ===2?'女':'其他'}}</small></span>
							<span>年龄&nbsp;:&nbsp;<small>{{clinic.age}}岁</small></span>
							<span>联系电话&nbsp;:&nbsp;<small>{{clinic.telephone}}</small></span>
							<span>身份证号&nbsp;:&nbsp;<small>{{clinic.idcard}}</small></span>
							<span>开单科室&nbsp;:&nbsp;<small>{{clinic.doctorDeptName}}</small></span>
							<span>开单医生&nbsp;:&nbsp;<small>{{clinic.doctorName}}</small></span>
							<span>费别&nbsp;:&nbsp;<small>{{ clinic.paytypeName ? clinic.paytypeName : '自费'}}</small></span>
							<span v-if="clinic.address">地址&nbsp;:&nbsp;<small>{{clinic.address}}</small></span>
						</div>
						<div class="result">
							<p class="title">诊断结果</p>
							<div class="text dhei">
								{{ clinic.assessmentcontent ? clinic.assessmentcontent : '暂无' }}
							</div>
							<p class="title">RP</p>
							<div v-for="(rps,index) in rpList" :key="rps.id">
								<span style="font-size:16px">{{index+1}}.</span>
								<p class="tt" style="margin:5px 0">{{rps.name}}&nbsp;{{rps.spec}}&nbsp;X{{rps.dose}}{{rps.doseunit}}</p>               
								<p class="nub">用法用量&nbsp;:&nbsp;&nbsp;{{rps.route}}&nbsp;{{rps.singledose}}{{rps.singledoseunit}}/日&nbsp;&nbsp;{{rps.frequency}}&nbsp;{{rps.period}}天</p>
								<p class="nub">备注&nbsp;:&nbsp;&nbsp;{{rps.medicalAdvice || '无'}}</p>
								<img src="../../../assets/images/zhang.png" alt="">
							</div>
						</div>
						<div class="line"></div>
						<div class="physician">
							<span v-if="!clinic.prescriptionSignature">处方医师&nbsp;:&nbsp;<small>{{ clinic.doctorName}}</small></span>
							<span v-if="clinic.prescriptionSignature">处方医师&nbsp;:&nbsp;<img  :src="clinic.prescriptionSignature" /></span>
							<span v-if="!clinic.prescriptionReview">处方审核&nbsp;:&nbsp;<small >{{ clinic.qdDocname}}</small></span>
							<span v-if="clinic.prescriptionReview">处方审核&nbsp;:&nbsp;<img :src="clinic.prescriptionReview" /></span>
							<span v-if="clinic.fyDoctorSignature">药品调配&nbsp;:&nbsp;<img :src="clinic.fyDoctorSignature" /></span>
							<span v-if="!clinic.fyDoctorSignature">药品调配&nbsp;:&nbsp;<small >{{clinic.fyDoctor}}</small></span>
							<span>电子处方时间&nbsp;:&nbsp;<small>{{clinic.createtime}}</small></span>
						</div>
					</div>					
				</div>
			</div>
			<div slot="footer" style="text-align:center">
				<Button @click="back">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
				</Button>		
			</div>		
		</Modal>
 	</div>
</template>

<script>
export default {
  name: 'IconMask',
  props: {
    clinic: Object,
    rpList: Object,
    madecode: String,
  },
  methods: {
	back() {
		this.$emit('showModal');
	},
  }
}
</script>

<style lang="less" scoped>
.PerMask{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	.PerMask-com{
		padding-bottom: 30px;
		background-size:cover;
		position: relative;
		top:0;
		left:0;           
		overflow: scroll;
		background-image: url('../../../assets/images/report_bg.jpg');
		.com-right{
			height: calc(100% - 40px);
			font-size: 14px;
			color: #242526;
			.com-left-one{
				width: 100%;
				height: calc(100% - 110px);
				overflow: auto;
			}
			.com-left-two{
				width: 100%;
				height: calc(100% - 81px);
				overflow: auto;
			}
			.com-left-one::-webkit-scrollbar,
			.com-left-two::-webkit-scrollbar{
				height: 0;
				width: 0;
			}
			.physician{
				width: 100%;
				min-height: 10px;
				margin-left: 5px;
				padding-top: 5px;
				span{
					display: inline-block;
					min-width: 32%;
					color: #999;
					font-size: 14px;
					line-height: 25px;
					display: inline-block;
					text-align: left;
					margin-bottom:5px;
					small{
						font-size: 12px;
						color: #333;
						font-weight: 500;
					}
					img{
						width: 80px;
						height: 50px;
						vertical-align: middle;
					}
				}
			}
			.line{
				width: 97%;
				height: 10px;
				margin-left: 5px;
				border-top:2px solid #333333;
				border-bottom:2px solid #333333;
			}
			.header{
				width: 100%;
				min-height: 100px;
				padding: 10px;
				text-align: center;
				position: relative;
				p:nth-child(1){
					font-size:20px;
					color: #333;
					font-weight: 500;
					margin: 10px 0;
				}
				p:nth-child(2){
					font-size:22px;
					color: #333;
					margin: 10px 0;
					font-weight: 500;
				}
				p:nth-child(3){
					border: 1px solid #999;
					width: 70px;
					height: auto;
					line-height: 26px;
					color: #333;
					font-size: 20px;
					position: absolute;
					top: 15px;
					left: 15px;
				}
				img{
					width: 80px;
					height: 80px;
					position: absolute;
					top: 10px;
					right: 15px;
				}
				.nub{
					padding: 15px 0 20px 0;
					span{
						color: #333;
						font-size: 15px;
						b{
							color: #999;
							font-size: 13px;
						}
					}
				}
			}
			
		}
	}
	.result{
		width: 98%;
		min-height: 160px;
		max-height: 300px;
		overflow-y: scroll;
		margin-left: 5px;
		position: relative;
		.title{
			color: #999;
			font-size: 14px;
			margin: 8px 0;
		}
		.dhei{
			border-bottom:1px dashed #cccccc;
		}
		.text{
			color: #333;
			font-size: 16px;
			font-weight: 500;
			line-height: 26px;
			letter-spacing: 1px;
		}
		.tt{
			display: inline-block;
			color: #333;
			font-size: 18px;
			font-weight: 500;
			letter-spacing: 1px;
		}
		.nub{
			font-size: 16px;
			color: #999;
			margin: 5px 0;
		}
		img{
			width: 80px;
			height: 80px;
			position: absolute;
			bottom: 25px;
			right: 10px;
		}
	}
	.essential{
		width: 98%;
		min-height: 100px;
		margin-left: 8px;
		padding: 7px 0;
		border-bottom:1.5px solid #cccccc;
		box-sizing: border-box;
		span{
			color: #999;
			font-size: 14px;
			line-height: 25px;
			display: inline-block;
			text-align: left;
			small{
				color: #333;
				font-size: 14px;
				font-weight: 500;
			}
		}
		span:nth-child(1){
			margin-right: 150px;
		}
		span:nth-child(2){
			margin-right: 80px;
		}
		span:nth-child(4){
			margin-right: 45px;
		}
		span:nth-child(6){
			margin-right: 65px;
		}
		span:nth-child(7){
			margin-right: 65px;
		}
		span:nth-child(8){
			margin-right: 25px;
		}
	}
}
</style>
